<template>
    <button class="ripple" ref="btn">{{text}}</button>
</template>

<script>
export default {
  name: 'my-button',
  props:['text'],
}
</script>

<style lang="less">
.ripple {
  background: radial-gradient(circle at right,#016299,#037f8d);
  color: white;
  height: 60px;
  width: 200px;
  border: none;
  font-family: 'QNHGXK';
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 20px 30px;
  overflow: hidden;
  margin: 10px 0;
  position: relative;
  cursor: pointer;
  border-radius: 2em;

  &:focus {
    outline: none;

  }
}
</style>